<template>
  <div class="landing-page">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="nav-container">
        <div class="logo">
            <img src="@/assets/images/logo.png" alt="Logo" width="50" height="50"/>
            <img src="@/assets/images/logo_new.png" alt="Logo" width="50" height="50"/>
          </div>
        <ul class="nav-links">
        </ul>
      </div>
    </nav>

    <!-- 主要内容区 -->
    <section class="hero-section" id="home">
      <div class="hero-content">
        <h1 class="hero-title">国学智慧 AI赋能</h1>
        <p class="hero-subtitle">融合中医、易经、道家文化精髓<br>打造专业的国学AI大模型平台</p>
        <div class="cta-container">
          <router-link to="/chat/home" class="cta-primary" target="_blank" >立即体验</router-link>
          <a @click.prevent="scrollToSection('features')" class="cta-secondary">了解更多</a>
        </div>
      </div>
    </section>

    <!-- 特性展示 -->
    <section class="features-section" id="features">
      <div class="features-container">
        <h2 class="section-title">核心优势</h2>
        <div class="features-grid">
          <div 
            v-for="(feature, index) in features" 
            :key="index"
            class="feature-card"
            @click="handleFeatureClick(index)"
          >
            <div class="feature-icon">{{ feature.icon }}</div>
            <h3 class="feature-title">{{ feature.title }}</h3>
            <p class="feature-description">{{ feature.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 统计数据 -->
    <section class="stats-section">
      <div class="stats-container">
        <div 
          v-for="(stat, index) in stats" 
          :key="index"
          class="stat-item"
        >
          <div class="stat-number">{{ stat.number }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
      </div>
    </section>

    <!-- 关于我们 -->
    <section class="features-section" id="about">
      <div class="features-container">
        <h2 class="section-title">关于天纪智测</h2>
        <div class="about-content" v-html="configObj.tjzc" >
       
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer" id="contact">
      <div class="footer-container">
        <div class="footer-links">
          <a href="javascript:void(0);" @click="showUserAgreement">用户协议</a>
          <a href="javascript:void(0);" @click="showPrivacyPolicy">隐私政策</a>
          <a href="javascript:void(0);" @click="showContact">联系我们</a>
          <router-link to="/news">新闻动态</router-link>
        </div>
        <div class="copyright">
          © 2025 天纪智测（北京）科技有限公司 版权所有
        </div>
        <div class="beian-info">
          <a href="https://beian.mps.gov.cn/#/query/webSearch?code=2021027762" target="_blank">{{configObj.wxba}}</a>
          <a href="https://beian.miit.gov.cn/" target="_blank">{{configObj.icp}}</a>
          <a href="https://beian.miit.gov.cn/" target="_blank">{{configObj.gaba}}</a>
        </div>
      </div>
    </footer>

    <!-- 微信二维码浮动展示 -->
    <div class="wechat-float" :class="{ collapsed: !isQrExpanded }">
      <!-- 切换按钮（移动端显示） -->
      <div class="wechat-toggle" @click="toggleQrExpanded">
        <svg v-if="!isQrExpanded" width="18" height="18" viewBox="0 0 24 24" fill="none">
          <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
          <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
        </svg>
        <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none">
          <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>

      <!-- 二维码内容 -->
      <div class="wechat-inner" v-show="isQrExpanded">
        <div class="wechat-tip">扫码体验</div>
        <img
          :src="wechatQr"
          alt="微信小程序"
          @click="openQrViewer"
          class="wechat-qr-img"
        />
      </div>
    </div>

    <!-- 二维码大图查看器 -->
    <div v-if="showQrViewer" class="qr-viewer-overlay" @click="closeQrViewer">
      <div class="qr-viewer-container">
        <img
          :src="wechatQr"
          alt="微信小程序大图"
          class="qr-viewer-image"
          @click.stop
        />
        <button class="qr-viewer-close" @click="closeQrViewer">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            <path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { getConfigToObj } from '@/api/config'

// 微信小程序二维码

import wechatQr from '@/assets/images/phone.png'

const router = useRouter()
const configObj = ref({})

// 二维码相关状态
const showQrViewer = ref(false)
// 检测是否为移动设备
const isMobile = ref(window.innerWidth <= 768)
const isQrExpanded = ref(!isMobile.value) // 移动端默认折叠，PC端默认展开

// 特性数据
const features = ref([
  {
    icon: '🏥',
    title: '中医智能诊断',
    description: '基于深度学习的中医诊断系统，融合传统医学理论与现代AI技术，提供精准的健康分析与建议。'
  },
  {
    icon: '☯️',
    title: '易经智慧决策',
    description: '运用易经哲学原理，结合大数据分析，为企业和个人提供智慧决策支持。'
  },
  {
    icon: '🎯',
    title: '道家养生指导',
    description: '整合道家养生文化，通过AI算法提供个性化的健康管理和养生方案。'
  }
])

// 统计数据
const stats = ref([
  { number: '50+', label: '荣誉认证' },
  { number: '100万+', label: '服务用户' },
  { number: '10+', label: '合作机构' },
  { number: '99.9%', label: '准确率' }
])

// 平滑滚动到指定区域
const scrollToSection = (sectionId) => {
  const element = document.getElementById(sectionId)
  if (element) {
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  }
}

// 处理特性卡片点击
const handleFeatureClick = (index) => {
  const routeConfigs = [
    { name: 'health' }, // 中医智能诊断页面
    { name: 'health', query: { categoryId: 10 } }, // 易经智慧决策页面
    { name: 'constitution' } // 道家养生指导页面
  ]
  
  if (routeConfigs[index]) {
    const routeConfig = routeConfigs[index]
    const url = router.resolve(routeConfig).href
    window.open(url, '_blank')
  }
}

// 弹窗方法
const showContact = () => {
  alert('地址：北京市朝阳区将台乡酒仙桥北路乙10号院2号楼星地中心B座7层729室\n邮箱：hokor@spacetimesc.cn\n电话：010-53397088')
}

const showUserAgreement = () => {
  alert('用户协议内容请联系客服获取')
}

const showPrivacyPolicy = () => {
  alert('隐私政策内容请联系客服获取')
}

// 打开二维码大图查看
const openQrViewer = () => {
  showQrViewer.value = true
}

// 关闭二维码大图查看
const closeQrViewer = () => {
  showQrViewer.value = false
}

// 切换移动端二维码展开/折叠
const toggleQrExpanded = () => {
  isQrExpanded.value = !isQrExpanded.value
}

// 监听窗口大小变化
const handleResize = () => {
  const wasMobile = isMobile.value
  isMobile.value = window.innerWidth <= 768

  // 当从PC切换到移动端时，自动折叠
  if (!wasMobile && isMobile.value) {
    isQrExpanded.value = false
  }
  // 当从移动端切换到PC时，自动展开
  else if (wasMobile && !isMobile.value) {
    isQrExpanded.value = true
  }
}

// 导航栏滚动效果
const handleScroll = () => {
  const navbar = document.querySelector('.navbar')
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
  
  if (scrollTop > 100) {
    navbar.style.background = 'rgba(10, 10, 10, 0.98)'
  } else {
    navbar.style.background = 'rgba(10, 10, 10, 0.95)'
  }
}

onMounted(async () => {
  window.addEventListener('scroll', handleScroll)
  window.addEventListener('resize', handleResize)
  const res = await getConfigToObj();
  configObj.value = res.data;
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.landing-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #0a0a0a;
  color: #ffffff;
  overflow-x: hidden;
}

/* 导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1000;
  padding: 0 20px;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(90deg, #00ff88 0%, #00d4ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: #b0b0b0;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s;
  cursor: pointer;
}

.nav-links a:hover {
  color: #ffffff;
}

.nav-btn {
  background: linear-gradient(90deg, #00ff88 0%, #00d4ff 100%);
  color: #000;
  padding: 10px 24px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.3s, box-shadow 0.3s;
}

.nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 255, 136, 0.4);
}

/* 主要内容区域 */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 20px;
  background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.1) 0%, transparent 70%);
}

.hero-content {
  text-align: center;
  max-width: 900px;
}

.hero-title {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #ffffff 0%, #b0b0b0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 1.5rem;
  color: #b0b0b0;
  margin-bottom: 40px;
  line-height: 1.6;
}

.cta-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-primary {
  background: linear-gradient(90deg, #00ff88 0%, #00d4ff 100%);
  color: #000;
  padding: 15px 40px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  transition: all 0.3s;
}

.cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 255, 136, 0.4);
}

.cta-secondary {
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 13px 40px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  transition: all 0.3s;
  cursor: pointer;
}

.cta-secondary:hover {
  border-color: #00ff88;
  background: rgba(0, 255, 136, 0.1);
}

/* 特性展示区域 */
.features-section {
  padding: 100px 20px;
  background: #0f0f0f;
}

.features-container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 60px;
  background: linear-gradient(90deg, #00ff88 0%, #00d4ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.feature-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
}

.feature-card:hover {
  transform: translateY(-10px);
  border-color: #00ff88;
  box-shadow: 0 20px 40px rgba(0, 255, 136, 0.2);
}

.feature-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

.feature-title {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #ffffff;
}

.feature-description {
  color: #b0b0b0;
  line-height: 1.6;
}

/* 统计数据区域 */
.stats-section {
  padding: 80px 20px;
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 212, 255, 0.1) 100%);
}

.stats-container {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 3rem;
  font-weight: 700;
  color: #00ff88;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 1.2rem;
  color: #b0b0b0;
}

/* 关于我们内容 */
.about-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.8;
  color: #b0b0b0;
}

.about-content p {
  margin-bottom: 20px;
}

/* 页脚样式 */
.footer {
  background: #050505;
  padding: 40px 20px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.footer-links a {
  color: #b0b0b0;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #00ff88;
}

.copyright {
  color: #666;
  margin-bottom: 10px;
}

.beian-info {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.beian-info a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
}

.beian-info a:hover {
  color: #00ff88;
}

/* 微信二维码浮动样式 */
.wechat-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  animation: fadeInUp 0.5s ease;
  transition: all 0.3s ease;
}

/* 切换按钮（默认隐藏，移动端显示） */
.wechat-toggle {
  display: none;
  position: absolute;
  left: -35px;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 60px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 212, 255, 0.15) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 20px 0 0 20px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #00ff88;
  transition: all 0.3s ease;
  box-shadow: -2px 0 10px rgba(0, 255, 136, 0.2);
}

.wechat-toggle svg {
  width: 18px;
  height: 18px;
}

.wechat-toggle:active {
  transform: translateY(-50%) scale(0.95);
}

/* 折叠状态 */
.wechat-float.collapsed {
  transform: translateX(calc(100% + 5px));
}

.wechat-float.collapsed .wechat-toggle {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.25) 0%, rgba(0, 212, 255, 0.25) 100%);
  border-color: #00ff88;
  box-shadow: -3px 0 20px rgba(0, 255, 136, 0.4);
  animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% {
    box-shadow: -3px 0 20px rgba(0, 255, 136, 0.4);
  }
  50% {
    box-shadow: -3px 0 30px rgba(0, 255, 136, 0.6);
  }
}

.wechat-inner {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 136, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  cursor: pointer;
}

.wechat-inner:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 12px 40px rgba(0, 255, 136, 0.3);
  border-color: #00ff88;
}

.wechat-tip {
  color: #00ff88;
  font-size: 12px;
  text-align: center;
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.wechat-qr-img {
  width: 150px;
  height: 150px;
  border-radius: 8px;
  display: block;
  transition: transform 0.3s ease;
}

.wechat-inner:hover .wechat-qr-img {
  transform: scale(1.02);
}

/* 二维码大图查看器 */
.qr-viewer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2001;
  animation: fadeIn 0.3s ease;
  cursor: pointer;
}

.qr-viewer-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: modalSlideIn 0.3s ease;
}

.qr-viewer-image {
  width: 300px;
  height: 300px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 255, 136, 0.2);
  cursor: default;
  background: white;
  padding: 10px;
}

.qr-viewer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #00ff88;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.qr-viewer-close:hover {
  background: rgba(0, 255, 136, 0.2);
  border-color: #00ff88;
  transform: scale(1.05);
}

.qr-viewer-close:active {
  transform: scale(0.95);
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
  }
  
  .nav-links {
    display: none;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-links {
    gap: 20px;
  }
  
  .wechat-float {
    bottom: 20px;
    right: 0; /* 贴边 */
  }

  /* 显示切换按钮 */
  .wechat-toggle {
    display: flex;
    height: 50px;
    width: 30px;
    left: -30px;
    border-radius: 15px 0 0 15px;
  }

  .wechat-toggle svg {
    width: 16px;
    height: 16px;
  }

  /* 折叠状态时完全隐藏到右侧 */
  .wechat-float.collapsed {
    transform: translateX(calc(100% + 5px));
  }

  .wechat-float.collapsed .wechat-toggle {
    left: -30px;
  }

  .wechat-inner {
    border-radius: 12px 0 0 12px; /* 调整圆角 */
    padding: 10px;
  }

  .wechat-tip {
    font-size: 11px;
    margin-bottom: 6px;
  }

  .wechat-qr-img {
    width: 120px;
    height: 120px;
  }

  .qr-viewer-image {
    width: 250px;
    height: 250px;
  }

  .qr-viewer-close {
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
  }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
  .wechat-float {
    bottom: 15px;
    right: 0;
  }

  .wechat-inner {
    padding: 8px;
    border-radius: 10px 0 0 10px;
  }

  .wechat-toggle {
    width: 28px;
    height: 45px;
    left: -28px;
    border-radius: 12px 0 0 12px;
  }

  .wechat-toggle svg {
    width: 14px;
    height: 14px;
  }

  .wechat-float.collapsed .wechat-toggle {
    left: -28px;
  }

  .wechat-qr-img {
    width: 100px;
    height: 100px;
  }

  .qr-viewer-image {
    width: 200px;
    height: 200px;
  }

}
</style>